import * as React from "react";
import { observer } from "mobx-react";
import { observable } from "mobx";
import { Table, Modal, Spin } from "antd";
import { AjaxData } from "../../../../../../data/interface/publicInterface";
import moment from "moment";

import { findLineLossList } from "../../serviceApi";
import "./index.less";
import { ConditionData } from "../../index";

export interface TableProps {
  queryData: ConditionData;
}

export interface TableState {}

interface columnsDataCLass {
  title: string;
  dataIndex: string;
  key: string;
  render?: any;
}

@observer
class LossAnalysisTable extends React.Component<TableProps, TableState> {
  @observable private columns: columnsDataCLass[] = [
    {
      title: "名称",
      dataIndex: "name",
      key: "name",
    },
    {
      title: "统计周期",
      dataIndex: "cycle",
      key: "cycle",
      render: (text, record) => {
        if (text === "2") {
          return "日";
        } else if (text === "3") {
          return "月";
        } else {
          return "年";
        }
      },
    },
    {
      title: "数据时间",
      dataIndex: "dataTime",
      key: "dataTime",
      render: (text, record) => {
        if (record.cycle === "2") {
          let newDate = moment(record.dataTime, "x").format("YYYY-MM-DD"); //parse string
          return <span>{newDate}</span>;
        } else if (record.cycle === "3") {
          let newDate = moment(record.dataTime, "x").format("YYYY-MM"); //parse string
          return <span>{newDate}</span>;
        } else {
          let newDate = moment(record.dataTime, "x").format("YYYY"); //parse string
          return <span>{newDate}</span>;
        }
      },
    },
    {
      title: "损耗率",
      dataIndex: "rate",
      key: "rate",
    },
    {
      title: "总供入",
      dataIndex: "inVal",
      key: "inVal",
    },
    {
      title: "总供出",
      dataIndex: "outVal",
      key: "outVal",
    },
    {
      title: "供入完整率",
      dataIndex: "inNumRate",
      key: "inNumRate",
    },
    {
      title: "供出完整率",
      dataIndex: "outNumRate",
      key: "outNumRate",
    },
  ];
  private dataSouce: any[] = [];
  private pageIndex: number = 1;
  private pageSize: number = 20;
  private total: number = 0;

  state = {
    loading: false,
  };
  render() {
    return (
      <>
        <div className="rowcon_body">
          <Spin spinning={this.state.loading}>
            <Table
              columns={this.columns}
              dataSource={this.dataSouce}
              pagination={{
                pageSize: this.pageSize,
                current: this.pageIndex,
                total: this.total,
                onChange: (page: number) => {
                  this.pageIndex = page;
                  this.getPream();
                },
              }}
            ></Table>
          </Spin>
        </div>
      </>
    );
  }
  /**钩子函数 */
  componentWillMount() {
    this.init();
  }
  /**请求函数 */

  //获取初始列表
  getLossAnalysisData() {
    let pream = {
      pageIndex: this.pageIndex,
      pageSize: this.pageSize,
      queryData: this.props.queryData,
    };
    let _this = this;
    this.setState({ loading: true });
    findLineLossList(JSON.stringify(pream))
      .then((rnt: any) => {
        if (rnt) {
          let res: AjaxData = rnt;
          if (res.success) {
            this.setState({ loading: false });
            // this.init();
            this.dataSouce = res.data.records;
            this.total = res.data.total;
            this.forceUpdate();
          } else {
            Modal.error({
              title: res.message,
              onOk: () => {
                _this.setState({ loading: false });
              },
            });
          }
        }
      })
      .catch((err) => {
        this.setState({ loading: false });
      });
  }

  /**操作方法 */
  init() {
    this.getLossAnalysisData();
  }
  //翻页方法
  getPream() {
    this.getLossAnalysisData();
  }
}

export default LossAnalysisTable;
